<template>
  <div class="box">
    <table-search
      slot="searchbar"
      v-model="searchData"
      :columns="searchOptions"
      @search="handleSearch"
    >
      <template slot="button">
        <a-button
          @click="handleExport"
          icon="download"
          style="color: #606266"
          slot="button"
          type="link"
        >
          导出
        </a-button>
        <!-- <a-button
          @click="handleAdd"
          icon="plus"
          style="color: #606266"
          slot="button"
          type="link"
        >
          添加
        </a-button> -->
      </template>
    </table-search>
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="data"
        size="middle"
        :scroll="{ x: 1040 }"
        :pagination="false"
      >
        <template slot="index" slot-scope="scope">{{ scope.key }}</template>
        <template slot-scope="scope" slot="action">
          <a-button
            style="color: #2a5ee3"
            type="link"
            @click="handleEdit(scope)"
            size="small"
          >
            小票图片
          </a-button>
          <a-button
            style="color: #2a5ee3"
            type="link"
            @click="handleDelete(scope)"
            size="small"
          >
            订单详情
          </a-button>
        </template>
      </a-table>
      <div class="pagination-box">
        <a-pagination
          show-quick-jumper
          @change="handleChange"
          :show-total="(total) => `共 ${total} 条`"
          :defaultCurrent="pagination.current"
          :pageSize="pagination.pageSize"
          :total="pagination.total"
          :hideOnSinglePage="true"
        />
      </div>
    </div>
    <a-modal
      class="order-box"
      :visible="visible"
      width="370px"
      :footer="null"
      :title="null"
    >
      <template slot="closeIcon">
        <div
          style="
            width: 100%;
            height: 100%;
            position: absolute;
            top: -50%;
            right: -50%;
          "
          @click="handleCancel"
        >
          <a-icon type="close" />
        </div>
      </template>
      <div class="modal-content"><img onerror="加载失败" src="" alt="" /></div>
    </a-modal>
    <a-modal :visible="visibles" width="914px" :footer="null">
      <template slot="title">
        <span>订单详情</span>
      </template>
      <template slot="closeIcon">
        <div style="width: 100%; height: 100%" @click="handleCancel">
          <a-icon type="close" />
        </div>
      </template>
      <div class="model-order-box">
        <div class="model-order-checklist">
          <div>商品清单</div>
          <div>
            <div>
              <a-table
                :columns="modelColumns"
                :data-source="modelData"
                size="middle"
                :pagination="false"
              >
                <template slot="index" slot-scope="scope">{{
                  scope.key
                }}</template>
              </a-table>
            </div>
          </div>
        </div>
        <div class="nodel-order-receipt">
          <div>订单小票</div>
          <div>
            <img src="" alt="" />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import columns from "./colums";
import modelColumns from "./modelColumns";
export default {
  data() {
    return {
      visibles: false,
      visible: false,
      modelColumns,
      columns,
      modelData: [
        {
          key: "1",
          commodityName: "双汇烤肠",
          commodityCode: "",
          number: "1",
          unitPrice: "2.00",
          turnover: "2.00",
        },
        {
          key: "2",
          commodityName: "双汇烤肠",
          commodityCode: "",
          number: "1",
          unitPrice: "2.00",
          turnover: "2.00",
        },
      ],
      data: [
        {
          key: "1",
          supermarketName: "孙武三泽购物广场",
          cashierNum: "7号收银机(141)",
          commodity: "6",
          cash: "52.30",
          receiptDate: "2021-02-15   14:15:43",
        },
        {
          key: "2",
          supermarketName: "孙武三泽购物广场",
          cashierNum: "7号收银机(141)",
          commodity: "6",
          cash: "52.30",
          receiptDate: "2021-02-15   14:15:43",
        },
      ],
      pagination: {
        total: 50,
        current: 1,
        pageSize: 10,
      },
      searchData: {},
      searchOptions: [
        {
          type: "daterange",
          label: "日期",
          prop: "receiptDate",
        },
        {
          type: "select",
          label: "超市名称",
          prop: "supermarketName",
          attrs: {
            filterable: true,
          },
          enums: [
            {
              label: "孙武三泽购物广场",
              value: "1",
            },
          ],
        },
        {
          type: "select",
          label: "收银机编号",
          prop: "cashierNum",
          attrs: {
            filterable: true,
          },
          enums: [
            {
              label: "7号收银机(141)",
              value: "1",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleSearch(val) {
      console.log(val, "查询");
    },
    handleEdit(val) {
      this.visible = true;
      console.log(val, "小票图片");
    },
    handleDelete(val) {
      this.visibles = true;
      console.log(val, "订单详情");
    },
    handleChange(page, pageSize) {
      console.log(page, pageSize, "分页");
    },
    handleExport() {
      console.log("导出");
    },
    handleAdd() {
      console.log("添加");
    },
    handleCancel() {
      this.visible = false;
      this.visibles = false;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .table-box {
    padding-top: 30px;
  }
  .pagination-box {
    text-align: right;
    // position: absolute;
    // bottom: 40px;
    // right: 16px;
    padding-top: 40px;
    .ant-pagination {
      display: inline-block;
    }
  }
}
.model-order-box {
  overflow: hidden;
  .model-order-checklist {
    float: left;
    width: 60%;
    & > div:nth-child(1) {
      margin-bottom: 20px;
    }
    & > div:nth-child(2) {
      height: 400px;
      overflow-x: hidden;
      margin-right: 50px;
      & > div {
        width: calc(100% + 18px);
        height: 400px;
        overflow-y: scroll;
      }
    }
  }
  .nodel-order-receipt {
    float: right;
    width: 40%;
    height: 100%;
    & > div:nth-child(1) {
      margin-bottom: 20px;
    }
    & > div:nth-child(2) {
      height: 400px;
      overflow-x: hidden;
      img {
        width: 100%;
      }
    }
  }
}
.modal-content {
  width: calc(100% + 12px);
  min-height: 200px;
  max-height: 590px;
  overflow-x: hidden;
  vertical-align: middle;
  text-align: center;
  line-height: 200px;
  background: rgb(238, 238, 238);
  img {
    width: 100%;
    vertical-align: middle;
  }
}
</style>
<style lang="less">
.order-box {
  .ant-modal-body {
    padding: 0;
    overflow: hidden;
  }
}
</style>
